<template>
    <div class="component-nav">
        <van-nav-bar
            :title="title"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />
    </div>
</template>
<script>
export default {
    name: "nav-bar",
    props: {
        title: {
            type: String,
            default: null,
        },
    },

    data() {
        return {};
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        onClickRight() {},
    },
};
</script>
<style lang="scss">
.component-nav {
    .van-nav-bar {
        background-color: #151523;
    }
    .van-nav-bar .van-icon {
        color: #fff;
    }
    .van-nav-bar__title {
        color: #fff;
    }
    [class*="van-hairline"]::after {
        border: none;
    }
}
</style>
